<template>

  <div>
    <span style="font-weight: bold;font-size: 18px;color: #FF4146">总逾期数量: {{this.amounts}}</span>
<!--    <el-row type="flex" justify="center">-->
<!--      <el-col :span="12">-->
<!--&lt;!&ndash;        <h4 style="text-align: center">逾期量省份分布</h4>&ndash;&gt;-->
<!--        <div id="mychart" style="height: 500px;width:750px;text-align: center"></div></el-col>-->
<!--    </el-row>-->
<!--    <div style="margin-bottom: 50px"></div>-->
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <div id="capsuleBarChart" style="height: 400px;width:600px;margin-left: 120px">-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div id='Echarts13' style="width: 600px;height: 400px"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->

   <el-row>
     <el-col :span="12">
       <!--     省份逾期率-->
       <div id="yqProRate" style="width: 600px;height: 1200px;margin-left: 100px"></div>

     </el-col>
     <el-col :span="12" >
       <div id="Echarts14" style="width: 700px;height: 370px"></div>
       <div id="EchartsAge" style="width: 700px;height: 400px"></div>
     </el-col>
   </el-row>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import  { yqPro,yqAge,yqSex,yqAmount,yqSexRate,yqAgeRate,provOverdue } from "@/api/data";
export default {
  data(){
    return{
      myChart: {},
      agedata:[],
      ageSum:0,
      pieData: [],
      pieName: [],
      sexSum:0,
      sexData:[],
      amounts:0,
      sexData1:[],
      proRateData:[],
      ageRateData:[],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };

  },
 mounted() {
   // this.initDate(); //数据初始化
   // this.initEcharts();
   // this.drawCapsuleBar();
   // this.drawAgedata();
   // this.datas();
   // this.drawSexdata();
   this.getAmount();
   this.drawSexdataRate();
   this.ProRate();
   this.drawAge();
   // this.drawPro();
 },
  methods: {
    // datas(){
    //   yqPro().then(res=>{
    //    this.pieData=res.value;
    //    this.pieName=res.name;
    //     this.initEcharts();
    //   })
    // },
    // initEcharts() {
    //   // 饼图
    //   const option = {
    //     // legend: {
    //     //   // 图例
    //     //   data: this.pieName,
    //     //   left: '90%',
    //     //   top: "1%",
    //     //   orient: "vertical"
    //     // },
    //     title: {
    //       // 设置饼图标题，位置设为顶部居中
    //       text: "逾期省份分布",
    //       top: "0.1%",
    //       left: "center"
    //     },
    //     series: [
    //       {
    //         type: "pie",
    //         label: {
    //           show: true,
    //           formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
    //         },
    //         radius: "80%", //饼图半径
    //         data: this.pieData
    //       }
    //     ]
    //   };
    //   const optionFree = {
    //     xAxis: {},
    //     yAxis: {},
    //     series: [
    //       {
    //         data: this.seriesData,
    //         type: "line",
    //         smooth: true
    //       }
    //     ]
    //   };
    //   this.myChart = echarts.init(document.getElementById("mychart"));
    //   this.myChart.setOption(option);
    //   //随着屏幕大小调节图表
    //   window.addEventListener("resize", () => {
    //     this.myChart.resize();
    //   });
    // },

    // drawAgedata(){
    //   yqAge().then(res=>{
    //     this.agedata=res.data;
    //     this.drawCapsuleBar();
    //   })
    // },
    // drawCapsuleBar(){
    //   var mychart=echarts.init(document.getElementById("capsuleBarChart"));
    //   var data =  this.agedata;
    //   var barWidth = 20;
    //   var maxNum = 0;
    //   for (var i = 0; i < data.length; i++) {
    //     if (data[i] > maxNum) {
    //       maxNum = data[i];
    //     }
    //   }
    //
    //  var  option = {
    //     // backgroundColor: 'fff',
    //     grid: {
    //       top: '10%',
    //       left: '11%',
    //       right: '20%',
    //       bottom: '40%',
    //     },
    //
    //     title: {
    //       text: '逾期量年龄分布',
    //       left: "center"
    //
    //     },
    //     xAxis: {
    //       show: false,
    //     },
    //     yAxis: {
    //       data:['50-59岁','40-49岁','35-39岁', '30-34岁', '25-29岁','18-24岁'],
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         fontWeight:'bold',
    //         color:'#02afff',
    //         fontSize:15
    //         // textStyle: { fontSize: 13, color: '#02afff' },
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       axisTick: false,
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         zlevel: 2,
    //         data: data.map(function (item) {
    //           return {
    //             value: item,
    //             maxNum: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'inside',
    //           // distance: 80,
    //           align: 'left',
    //           formatter: function (params) {
    //             // return params.data.realValue;
    //             var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
    //             return percent;
    //           },
    //           color: '#fff',
    //           fontSize: 12,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    //             { offset: 0, color: '#395CFE' },
    //             { offset: 1, color: '#2EC7CF' },
    //           ]),
    //         },
    //       },
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         barGap: '-100%',
    //         data: data.map(function (item) {
    //           return {
    //             realValue: item,
    //             value: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'right',
    //           distance: 80,
    //           align: 'right',
    //           formatter: function (params) {
    //             return params.data.realValue + '人';
    //           },
    //           color: '#02afff',
    //           fontSize: 18,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: 'rgba(3,169,244, 0.5)',
    //         },
    //       },
    //     ],
    //   };
    //   mychart.setOption(option,true);
    // },
    // drawSexdata(){
    //   yqSex().then(res=>{
    //     this.sexSum=res.max;
    //     this.sexData=res.data;
    //     this.drawsex1();
    //   })
    // },
    drawSexdataRate(){

      yqSexRate().then(res=>{
         this.sexData1=res;
        this.drawSex();
      })
    },
    getAmount(){
      yqAmount().then(res=>{
        this.amounts=res;

      });
    },
    drawSex(){
      var mychart=echarts.init(document.getElementById("Echarts14"));
      var data =  this.sexData1;
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }

      var  option = {
        // backgroundColor: 'fff',
        grid: {
          top: '12%',
          left: '11%',
          right: '40%',
          bottom: '65%',
        },

        title: {
          text: '逾期率性别分布',
          left: "center"

        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data:data.map(function (item){
            return item.sex;
          }),
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontWeight:'bold',
            color:'#02afff',
            fontSize:15
            // textStyle: { fontSize: 13, color: '#02afff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'bar',
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              return {
                value: item.count,
                // maxNum: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'inside',
              // distance: 80,
              align: 'left',
              formatter: function (params) {
                // return params.data.realValue;
                var percent = Number(params.data.value * 100).toFixed(2) + '%';
                return percent;
              },
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#395CFE' },
                { offset: 1, color: '#2EC7CF' },
              ]),
            },
          },
          {
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            data: data.map(function (item) {
              return {
                realValue: item.gender,
                value: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'right',
              distance: 550,
              align: 'right',
              formatter: function (params) {
                return params.data.realValue;
              },
              color: '#02afff',
              fontSize: 15,
              fontWeight:'bold',
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(3,169,244, 0.5)',
            },
          },
        ],
      };
      mychart.setOption(option,true);

    },
    // drawsex1(){
    //   var mychart=echarts.init(document.getElementById("Echarts13"));
    //   var data =  this.sexData;
    //   var barWidth = 20;
    //   var maxNum = 0;
    //   for (var i = 0; i < data.length; i++) {
    //     if (data[i] > maxNum) {
    //       maxNum = data[i];
    //     }
    //   }
    //
    //   var  option = {
    //     // backgroundColor: 'fff',
    //     grid: {
    //       top: '10%',
    //       left: '11%',
    //       right: '22%',
    //       bottom: '75%',
    //     },
    //
    //     title: {
    //       text: '逾期量性别分布',
    //       left: "center"
    //
    //     },
    //     xAxis: {
    //       show: false,
    //     },
    //     yAxis: {
    //       data:['女','男'],
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         fontWeight:'bold',
    //         color:'#02afff',
    //         fontSize:15
    //         // textStyle: { fontSize: 13, color: '#02afff' },
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       axisTick: false,
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         zlevel: 2,
    //         data: data.map(function (item) {
    //           return {
    //             value: item,
    //             maxNum: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'inside',
    //           // distance: 80,
    //           align: 'center',
    //           formatter: function (params) {
    //             // return params.data.realValue;
    //             var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
    //             return percent;
    //           },
    //           color: '#fff',
    //           fontSize: 12,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    //             { offset: 0, color: '#395CFE' },
    //             { offset: 1, color: '#2EC7CF' },
    //           ]),
    //         },
    //       },
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         barGap: '-100%',
    //         data: data.map(function (item) {
    //           return {
    //             realValue: item,
    //             value: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'right',
    //           distance: 80,
    //           align: 'right',
    //           formatter: function (params) {
    //             return params.data.realValue + '人';
    //           },
    //           color: '#02afff',
    //           fontSize: 18,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: 'rgba(3,169,244, 0.5)',
    //         },
    //       },
    //     ],
    //   };
    //   mychart.setOption(option,true);
    // },
    // drawCapsuleBar1(){
    //   var mychart=echarts.init(document.getElementById("capsuleBarChart1"));
    //   var data =  this.agedata;
    //   var barWidth = 20;
    //   var maxNum = 0;
    //   for (var i = 0; i < data.length; i++) {
    //     if (data[i] > maxNum) {
    //       maxNum = data[i];
    //     }
    //   }
    //
    //   var  option = {
    //     // backgroundColor: 'fff',
    //     grid: {
    //       top: '10%',
    //       left: '11%',
    //       right: '15%',
    //       bottom: '40%',
    //     },
    //
    //     title: {
    //       text: '逾期率省份分布',
    //       left: "center"
    //
    //     },
    //     xAxis: {
    //       show: false,
    //     },
    //     yAxis: {
    //       data:['50-59岁','40-49岁','35-39岁', '30-34岁', '25-29岁','18-24岁'],
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         fontWeight:'bold',
    //         color:'#02afff',
    //         fontSize:15
    //         // textStyle: { fontSize: 13, color: '#02afff' },
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       axisTick: false,
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         zlevel: 2,
    //         data: data.map(function (item) {
    //           return {
    //             value: item,
    //             maxNum: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'inside',
    //           // distance: 80,
    //           align: 'center',
    //           formatter: function (params) {
    //             // return params.data.realValue;
    //             var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
    //             return percent;
    //           },
    //           color: '#fff',
    //           fontSize: 12,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    //             { offset: 0, color: '#395CFE' },
    //             { offset: 1, color: '#2EC7CF' },
    //           ]),
    //         },
    //       },
    //       {
    //         type: 'bar',
    //         barWidth: barWidth,
    //         barGap: '-100%',
    //         data: data.map(function (item) {
    //           return {
    //             realValue: item,
    //             value: maxNum,
    //           };
    //         }),
    //         label: {
    //           show: true,
    //           position: 'right',
    //           distance: 80,
    //           align: 'right',
    //           formatter: function (params) {
    //             return params.data.realValue + '人';
    //           },
    //           color: '#02afff',
    //           fontSize: 18,
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           color: 'rgba(3,169,244, 0.5)',
    //         },
    //       },
    //     ],
    //   };
    //   mychart.setOption(option,true);
    //   //随着屏幕大小调节图表
    //   window.addEventListener("resize", () => {
    //     this.myChart.resize();
    //   });
    // },

    ProRate(){
      provOverdue().then(res=>{
           // this.proNamedata=res.name;
           this.proRateData=res;
           this.drawPro();
      })
    },
    drawPro(){
      var chart1=echarts.init(document.getElementById("yqProRate"));
      var data = this.proRateData;
      // console.log(data.name);
      // console.log(data);
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }

      var  option = {
        // backgroundColor: 'fff',
        grid: {
          top: '3%',
          left: '20%',
          right: '40%',
          bottom: '5%',
        },

        title: {
          text: '逾期率省份分布',
          left: "center"

        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data:data.map(function (item){
            return item.name;
          }),
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontWeight:'bold',
            color:'#02afff',
            fontSize:15
            // textStyle: { fontSize: 13, color: '#02afff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'bar',
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              // console.log(item);
              return {
                value: item.value,
                // maxNum: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'inside',
              // distance: 80,
              align: 'left',
              formatter: function (params) {
                // console.log(params);
                // return params.data.realValue;
                var percent = Number(params.data.value * 100).toFixed(2) + '%';
                return percent;
              },
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#395CFE' },
                { offset: 1, color: '#2EC7CF' },
              ]),
            },
          },
          {
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            data: data.map(function (item) {
              return {
                realValue: item.str,
                value: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'right',
              distance: 450,
              align: 'right',
              formatter: function (params) {
                return params.data.realValue;
              },
              color: '#02afff',
              fontSize: 15,
              fontWeight:'bold'
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(3,169,244, 0.5)',
            },
          },
        ],
      };
      chart1.setOption(option,true);
    },

    drawAge(){
      yqAgeRate().then(res=>{
        this.ageRateData=res;
        this.drawAgeRate();
      })
    } ,

    drawAgeRate(){
      var chart2=echarts.init(document.getElementById("EchartsAge"));
      var data = this.ageRateData;
      // console.log(data);
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }

      var  option = {
        // backgroundColor: 'fff',
        grid: {
          top: '10%',
          left: '11%',
          right: '30%',
          bottom: '40%',
        },

        title: {
          text: '逾期率年龄分布',
          left: "center"

        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data:['50-59岁','40-49岁','35-39岁', '30-34岁', '25-29岁','18-24岁'],
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontWeight:'bold',
            color:'#02afff',
            fontSize:15
            // textStyle: { fontSize: 13, color: '#02afff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'bar',
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              return {
                value: item.value,
                maxNum: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'inside',
              // distance: 80,
              align: 'left',
              formatter: function (params) {
                // return params.data.realValue;
                var percent = Number(params.data.value * 100).toFixed(2) + '%';
                return percent;
              },
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#395CFE' },
                { offset: 1, color: '#2EC7CF' },
              ]),
            },
          },
          {
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            data: data.map(function (item) {
              return {
                realValue: item.name,
                value: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'right',
              distance: 550,
              align: 'right',
              formatter: function (params) {
                return params.data.realValue;
              },
              color: '#02afff',
              fontSize: 15,
              fontWeight:'bold'
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(3,169,244, 0.5)',
            },
          },
        ],
      };
      chart2.setOption(option,true);
    },

  },


}
</script>

<style scoped>
.eachars{
  text-align: center;
}
</style>